<template>
  <el-container>
    <el-main class="leftMain">
        <device-tree
        :show-tabs="false"
        :show-device-index="false"
        :query-data="queryData"
        :first-action="false"
      ></device-tree>
      <!-- <screen-index-tree :show-tabs="false" show-min-type="2" :show-device-index="false" :query-data="queryData" :first-action="false"></screen-index-tree> -->
    </el-main>
    <el-main class="rightMain">
      <bs-main>
        <screen-index-condition 
        ref="condition" slot="header" 
        :query-data="queryData" 
        @showSummary="showSummary" 
        :all-size="allSize" 
        :total-size="pageData.total"
        @resetCheck="resetCheck"></screen-index-condition>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="true"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
           @selection-change="handleSelectionChange">
          <template slot="firstScreenSlot" slot-scope="{row}">
            {{ row.screens|screenFilter('b') }}
          </template>
           <template slot="secondScreenSlot" slot-scope="{row}">
            {{ row.screens|screenFilter('c') }}
          </template>
           <template slot="thirdScreenSlot" slot-scope="{row}">
            {{ row.screens|screenFilter('d') }}
          </template>
           <template slot="fouthScreenSlot" slot-scope="{row}">
            {{ row.screens|screenFilter('e') }}
          </template>
           <template slot="fifthScreenSlot" slot-scope="{row}">
            {{ row.screens|screenFilter('f') }}
          </template>
           <template slot="faultSlot" slot-scope="{row}">
            {{ row|stateFilter }}
          </template>
          <template slot="screenDebugStateSlot" slot-scope="{row}">
            {{ row.screenDebugState ? '已调试' : '未调试' }}
          </template>
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="true" :allChecked="allSize" @all="handleChangeAllSize" @pagination="doList"></pagination>
      </bs-main>
    </el-main>
    <summary-index-dialog :query-data="queryData"></summary-index-dialog>
  </el-container>
</template>

<script>
import ScreenIndexCondition from './components/ScreenIndexCondition'
import SummaryIndexDialog from './components/SummaryIndexDialog'
// import ScreenIndexTree from './components/ScreenIndexTree'
import DeviceTree from '@/views/device/components/DeviceTree'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import ScreenApi from '@/api/screen'
import { HashMap } from '@/utils/hashmap'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }
    return {
      queryData: {queryType:0},
      editorForm: {},
      tableData: [],
      actionOpts: {
        show: false
      },
      colData: [
        { label: '终端名称',  prop:'name', minwidth:'120', headerContextMenus },
        { label: 'MAC地址',  prop:'macText', minwidth:'125', headerContextMenus },
        { label: '版本',  prop:'swVersion', minwidth:'100', headerContextMenus },

        { label: '车辆编号', prop:'carNo', minwidth:'80', headerContextMenus },
        { label: '车牌号码', prop:'carLicense', minwidth:'80', headerContextMenus },
        { label: '线路', prop:'lineNo', minwidth:'80', headerContextMenus },
        { label: '所属公司', prop:'busCompany', minwidth:'80', headerContextMenus },
        { label: '最后心跳', prop:'lastHeartTime', minwidth:'130', headerContextMenus },
        { label: '最后在线', prop:'lastOnlineTime', minwidth:'130', headerContextMenus },
        { label: '最后一次正确提交', prop:'lastScreenNormalTime', minwidth:'150', headerContextMenus },
        { label: '1号屏/故障说明', prop:'firstScreen',slot:true, minwidth:'120' },
        { label: '2号屏/故障说明', prop:'secondScreen',slot:true, minwidth:'120' },
        { label: '3号屏/故障说明', prop:'thirdScreen',slot:true, minwidth:'120' },
        { label: '4号屏/故障说明', prop:'fouthScreen',slot:true, minwidth:'120' },
        { label: '5号屏/故障说明', prop:'fifthScreen',slot:true, minwidth:'120' },
        { label: '地址码调试', prop:'screenDebugState', minwidth:'100', slot: true },
        { label: '是否异常', prop:'fault', slot: true }
      ],
      initColsProps: ['name', 'macText', 'swVersion', 'carNo', 'carLicense', 'lineNo','busCompany','lastHeartTime','lastOnlineTime','lastScreenNormalTime','firstScreen','secondScreen','thirdScreen','fouthScreen','fifthScreen', 'screenDebugState','fault'],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      initHeadmuneFlag: false,
      tableName:'scrennIndexTableList',
      allSize: false,
      
    }
  },
  created() {
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
  },
  components: {
      ScreenIndexCondition,
      SummaryIndexDialog,
      // ScreenIndexTree,
      DeviceTree,
      List,
      Pagination
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  //
  filters: {
    screenFilter(val,addr) {
      // console.log('screenFilter',val,addr)
      if(val) {
        const screen = val.find(item=>item.addr == addr)
        if(screen){
          if(screen.message == '没有屏幕状态提交'){
            return 'x/'+screen.message
          }else{
            return screen.code+'/'+screen.message
          }
        }else{
            return 'x/没有屏幕状态提交'
        }
      }
      return 'x/没有屏幕状态提交'
    },
    stateFilter(val){
      if(val.fault){
        return '否'
      }else{
        return '是'
      }
    }
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true
    },
    // 排序 排序类型1:屏幕名称 2:分组名称 3:车牌号码 4:车辆编号 5:状态 6:MAC地址	
    handleSort(sortInfo) {
        switch(sortInfo.prop) {
        case 'name':
          this.queryData.orderType = 1
          break;
        case 'macText':
          this.queryData.orderType = 2
          break;
        case 'carLicense':
          this.queryData.orderType = 3
          break;
        case 'carNo':
          this.queryData.orderType = 4
          break;
        case 'lineNo':
          this.queryData.orderType = 5
          break;
        case 'busCompany':
          this.queryData.orderType = 6
          break;
        case 'swVersion':
          this.queryData.orderType = 7
          break;
        case 'lastHeartTime':
          this.queryData.orderType = 8
          break;
        case 'lastOnlineTime':
          this.queryData.orderType = 9
          break;
        case 'lastScreenNormalTime':
          this.queryData.orderType = 10
          break;
        default:
          return;
      }
      this.queryData.orderParam = sortInfo.type
      this.doList()
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      this.allSize = false
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      console.log('queryData-------',queryData)
      const res = await ScreenApi.physicalScreenList(queryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },
    getActiveItem() {
      let items = this.$refs.list.getActiveItem()
      return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    showSummary(){
        this.$eventBus.$emit('showPhysicalScreenStateSummary')
    },
    resetCheck(){
      this.$refs.list.clearSelection();
    },
    // setIndex() {
    //   const param = this.getActiveItem()
    //   if (!this.allSize && !param) {
    //     this.$alert('提示', '请先选择对应的屏幕')
    //     return
    //   }
    //   let ids = []
    //   let tagIds = []
    //   let queryData = {}
    //   if(this.allSize) {
    //     queryData = this.queryData
    //     queryData.allSize = this.allSize
    //     queryData.total = this.pageData.total
    //   } else {
    //     if(param.length > 1) {
    //       param.forEach(item => {
    //         ids.push(item.id)
    //       })
    //     } else {
    //       ids.push(param.id)
    //       if(param.tagList) {
    //         param.tagList.forEach(item => {
    //           tagIds.push(item.tagIdString)
    //         })
    //       }
    //     }
    //   }
    //   this.$eventBus.$emit('showAddScreenIndexDialog', tagIds, ids, queryData)
    // },
    // 选择所有页
    handleChangeAllSize(val) {
      this.allSize = val
      this.$refs.list.clearSelection();
    },
    handleSelectionChange(val) {
      this.$refs.condition.selectChange(val)
    },
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-tree>.el-tree-node {
//   min-width:100%;
//   height: calc(100vh - 164px);
//   display:inline-block;
// }

// ::v-deep .tree{width: 100%; height: 100%; overflow-x: scroll;
// scrollbar-width: thin;
// }
::v-deep .el-tree-node {
    position: relative;
    padding-left: 10px;
}
</style>